<!DOCTYPE html>
<html>
<head>
    <title>WebSocket Client Demo </title>
    <meta charset="utf-8">
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript">
        var websocket_connected = false;

        var output;

        //连接VBarServer
        function vbar_open() {
            if (!websocket_connected) {
                var host = "ws://localhost:2693";
                websocketCtrl = new WebSocket(host,'ctrl');
                websocketData = new WebSocket(host,'data');
                output = document.getElementById("output");

                websocketData.onopen = function(evt) {
                    websocket_connected = true;
                    websocket_open_state(evt);
                }


                websocketData.onmessage = function (evt) {
                    websocket_decode(evt.data);
                }
            }

            setTimeout("vbar_open()", 3000);
        }

        function openwebsocket()
        {
            vbar_open("localhost","2693");

        }

        function websocket_open_state(message)
        {
            document.getElementById('wsocket').value = "已连接";
        }


        //接收扫码结果处理
        function websocket_decode(message){
            $.ajax({
                url:"{:U('sendPay')}",
                type:"post",
                dataType:"json",
                data:{"url":message},
                success:function(data){
                    console.log(data);
                    if (data.status == 1) {
                        s = data.data.department+"||"+data.data.major+"||"+data.data.class+"||"+data.data.username+"||"+data.mess;
                         var pre = document.createElement("p");
                             pre.innerHTML = s;
                             output.appendChild(pre);
                    } else {
                        // s = data.mess;
                    }
                   
                },
                error:function(){
                    mess = "请重新扫描";
                    var pre = document.createElement("p");
                    pre.innerHTML = mess;
                    output.appendChild(pre);
                }
            });
            
            
        }


        function lighton(){
            websocketCtrl.send("lighton")
        }

        function lightoff(){
            websocketCtrl.send("lightoff");
        }




    </script>
    <script type="text/javascript">
        $(function(){
           openwebsocket();
        })
    </script>
</head>
<body>

<div class="body">
    <div calss="box">
        <input type="button" value="连接服务" class="button" onclick="openwebsocket()" >
        Websocket连接状态：<input type="text" value="未连接" style="font-size:15px;height:30px;"  id="wsocket"/><br />
        <input type="button" value="开   灯" class="button" onclick="lighton()" >
        <input type="button" value="关   灯" class="button" onclick="lightoff()">


        扫码结果：
        <div class="piece-text" id="output" >
        </div>
       
    </div>
    </div>>
</body>
</html>